<script lang="ts" setup>
import SpiritIconPro from '@/components/icons/SpiritIconPro.vue'

const data = [
  {
    title: '正版授权',
    number: '110',
    footer: '平台正版授权数量（个）',
    icon: 'lock'
  },
  {
    title: '平台用户',
    number: '110',
    footer: '平台全部用户数量（位）',
    icon: 'user'
  },
  {
    title: '应用数量',
    number: '110',
    footer: '平台授权应用数量（个）',
    icon: 'control'
  },
  {
    title: '平台收入',
    number: '110',
    footer: '平台总收入（元）',
    icon: 'pay'
  }
]
</script>

<template>
  <t-space style="width: 100%">
    <t-row :gutter="[10, 10]">
      <t-col v-for="(item, index) in data" :key="index" :lg="3" :md="3" :sm="6" :xl="3" :xs="12">
        <t-card>
          <t-row>
            <t-col :span="8">
              <t-row class="title">{{ item.title }}</t-row>
              <t-row class="number">{{ item.number }}</t-row>
            </t-col>
            <t-col :span="4">
              <SpiritIconPro :icon="item.icon" />
            </t-col>
            <t-col :span="12">
              <p>{{ item.footer }}</p>
            </t-col>
          </t-row>
        </t-card>
      </t-col>
    </t-row>
  </t-space>
</template>

<style lang="sass" scoped>
.title
  font-size: 14px
  font-weight: bolder
.number
  padding: 10px 0
  font-weight: bolder
  font-size: 16px
  color: #409eff
</style>
